<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="../code/js/vue2.js"></script>
  </head>
  <body>
    <table border="1" width='600' id="table">
      <thead>
        <td>编号</td>
        <td>名字</td>
        <td>年龄</td>
        <td>地址</td>
        <td>性别</td>
      </thead>
      <tbody>
        <!-- <tr v-for="value in stuList" :key='value.id'>
          <td>{{ value.id }} </td>
          <td>{{ value.name }}</td>
          <td>{{ value.age }}</td>
          <td>{{ value.address }}</td>
          <td>{{ value.gender }}</td>
        </tr> -->
<!-- 遍历数组 -->
     <tr v-for='value in stuList'>
 <!-- 遍历对象      -->
     <td v-for='stu in value'>{{stu}}</td>
     <td ></td>
     <td></td>
     <td></td>
     <td></td>
     </tr>

      </tbody>
    </table>
  </body>
</html>
<!-- 构造函数 -->
<script>
  var bm = new Vue({
    el: "#table",
    data: {
      stuList: [
        {
          id: 1,
          name: "jack",
          age: 20,
          address: "广州黑马程序员",
          gender: "男"
        },
        {
          id: 2,
          name: "rose",
          age: 18,
          address: "广州黑马程序员",
          gender: "女"
        },
        {
          id: 3,
          name: "tom",
          age: 19,
          address: "广州黑马程序员",
          gender:'未知'
        }
      ]
    }
  });
</script>
